<template>
  <div class="home-page">
    <!-- 顶部文章数据 -->
    <div class="top">
      <div class="box">
        <em>10015</em>
        <span>篇</span>
        <b>总文章数</b>
      </div>
      <div class="box">
        <em>123</em>
        <span>篇</span>
        <b>日新增文章数</b>
      </div>
      <div class="box">
        <em>35</em>
        <span>条</span>
        <b>评论总数</b>
      </div>
      <div class="box">
        <em>123</em>
        <span>条</span>
        <b>日新增评论数</b>
      </div>
    </div>
    <!-- 中间数据图表 -->
    <div class="middle"></div>
    <!-- 底部数据 -->
    <div class="bottom"></div>
  </div>
</template>

<script>
export default {
  name: 'home-page'
}
</script>

<style lang="scss" scoped>
.home-page {
  // 顶部
  padding-top: 10px;
  position: fixed;
  left: 200px;
  right: 0;
  overflow: auto;
  .top {
    height: 150px;
    margin: 10px 15px;
    // background-color: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .box:last-child {
      margin: 0;
    }
    .box {
      width: 25%;
      height: 100px;
      overflow: hidden;
      text-align: center;
      position: relative;
      background-color: #fff;
      border: 1px solid #e7e7e9;
      margin-right: 5px;

      em {
        font-style: normal;
        font-size: 50px;
        line-height: 50px;
        display: inline-block;
        margin: 10px 0 0 20px;
        font-family: Arial;
        color: #83a2ed;
      }
      span {
        font-size: 14px;
        display: inline-block;
        color: #83a2ed;
        margin-left: 10px;
      }
      b {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        line-height: 24px;
        background: #e5e5e5;
        color: #333;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
  //  中间
  .middle {
    margin: 10px 15px;
    height: 350px;
    background-color: pink;
  }
  // 底部
  .bottom {
    margin: 10px 15px;
    height: 900px;
    background-color: aqua;
  }
}
</style>
